<include file="Public/min-header"/>
<link href="__PUBLIC__/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="__PUBLIC__/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/echart/echarts.min.js" type="text/javascript"></script>

<div class="wrapper">
    <include file="Public/breadcrumb"/>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="col-md-10">
        <div class="col-xs-5">
            <div class="input-group margin">
                <div class="input-group-addon">
                    选择时间  <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control pull-right" name="timegap" value="请选择日期范围" id="monty_time">
            </div>
        </div>
        <div class="col-xs-1"><input class="btn btn-block btn-info margin" type="submit" id="monty_submit" value="确定"></div>
</div>
</div>
<div id="monty" style="width:100%;height:400px;background: #fff;"></div>



<div class="wrapper">
    <div class="col-md-10">
        <div class="col-xs-5">
            <div class="input-group margin">
                <div class="input-group-addon">
                    选择时间  <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control pull-right" name="timegap" value="请选择日期范围" id="week_time">
            </div>
        </div>
        <div class="col-xs-1"><input class="btn btn-block btn-info margin" type="submit" id="week_submit" value="确定"></div>
    </div>

</div>
<div id="week" style="width:100%;height:400px;background: #fff;"></div>
<div class="wrapper">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="col-md-10">
        <div class="col-xs-5">
            <div class="input-group margin">
                <div class="input-group-addon">
                    选择时间  <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control pull-right" name="timegap" value="请选择日期范围" id="day_time">
            </div>
        </div>
        <div class="col-xs-1"><input class="btn btn-block btn-info margin" type="submit" id="day_submit" value="确定"></div>
    </div>

</div>
<div id="day" style="width:100%;height:400px;background: #fff;"></div>

<div id="user" style="width:100%;height:400px;background: #fff;"></div>


<script type="text/javascript">


    $(document).ready(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('monty'));
        var myChart_week = echarts.init(document.getElementById('week'));
        var myChart_day = echarts.init(document.getElementById('day'));
        var myChart_user = echarts.init(document.getElementById('user'));

        $.ajax({
            type : "POST",
            url:"/index.php?m=Admin&c=Ad&a=ad_statistics",
            data:{},
            dataType:"json",
            success: function(data){
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(data.monty);
                myChart_week.setOption(data.week);
                myChart_day.setOption(data.day);

            }
        });

        $.ajax({
            type : "POST",
            url:"/index.php?m=Admin&c=Ad&a=user_statistics",
            data:{},
            dataType:"json",
            success: function(data){

                myChart_user.setOption(data);

            }
        });
        $('#monty_time').daterangepicker({
            format:"YYYY-MM-DD",
            singleDatePicker: false,
            showDropdowns: true,
            minDate:'2016-01-01',
            maxDate:'2030-01-01',
            startDate:'2016-01-01',
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
//            ranges: {
//                '今天': [moment(), moment()],
//                '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],
//                '最近7天': [moment().subtract('days', 6), moment()],
//                '最近30天': [moment().subtract('days', 29), moment()],
//                '上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
//            },
            opens: 'right',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        });
        $('#week_time').daterangepicker({
            format:"YYYY-MM-DD",
            singleDatePicker: false,
            showDropdowns: true,
            minDate:'2016-01-01',
            maxDate:'2030-01-01',
            startDate:'2016-01-01',
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
//            ranges: {
//                '今天': [moment(), moment()],
//                '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],
//                '最近7天': [moment().subtract('days', 6), moment()],
//                '最近30天': [moment().subtract('days', 29), moment()],
//                '上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
//            },
            opens: 'right',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        });

        $('#day_time').daterangepicker({
            format:"YYYY-MM-DD",
            singleDatePicker: false,
            showDropdowns: true,
            minDate:'2016-01-01',
            maxDate:'2030-01-01',
            startDate:'2016-01-01',
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],
                '最近7天': [moment().subtract('days', 6), moment()],
                '最近30天': [moment().subtract('days', 29), moment()],
                '上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            opens: 'right',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        });

        //点击按月排序
        $(document).on('click','#monty_submit',function(){
            var time=$('#monty_time').val();
            $.ajax({
                type : "POST",
                url:"/index.php?m=Admin&c=Ad&a=ad_statistics_monty",
                data:{time:time},
                dataType:"json",
                success: function(data){
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(data);

                }
            });
        });

        //点击按月排序
        $(document).on('click','#week_submit',function(){
            var time=$('#week_time').val();
            $.ajax({
                type : "POST",
                url:"/index.php?m=Admin&c=Ad&a=ad_statistics_week",
                data:{time:time},
                dataType:"json",
                success: function(data){
                    // 使用刚指定的配置项和数据显示图表。
                    myChart_week.setOption(data);

                }
            });
        })

        //点击按天排序
        $(document).on('click','#day_submit',function(){
            var time=$('#day_time').val();
            $.ajax({
                type : "POST",
                url:"/index.php?m=Admin&c=Ad&a=ad_statistics_day",
                data:{time:time},
                dataType:"json",
                success: function(data){
                    // 使用刚指定的配置项和数据显示图表。
                    myChart_day.setOption(data);
                }
            });
        })


    });




</script>
</body>
</html>